import { SideBar } from "antd-mobile";
import { useRequest } from "ahooks";
import { getBrandList } from "@/api/product";
import { Dispatch, FC, SetStateAction } from "react";

type Props = {
  classId: string;
  activeKey: string;
  setActiveKey: Dispatch<SetStateAction<string>>;
};

const BrandList: FC<Props> = ({ classId, activeKey, setActiveKey }) => {
  const { data } = useRequest(() => getBrandList(classId), {
    // 刷新的依赖数组
    refreshDeps: [classId],
    // 是否自定发请求
    ready: !!classId,
    onSuccess(data) {
      setActiveKey(data.brandList[0].brandId);
    },
  });

  return (
    <SideBar activeKey={activeKey} onChange={setActiveKey}>
      {data?.brandList.map((item) => (
        <SideBar.Item key={item.brandId} title={item.brandName} />
      ))}
    </SideBar>
  );
};

export default BrandList;
